<template>
    <!-- <v-breadcrumbs :items="items" divider=">"></v-breadcrumbs> -->
    <div class="r-page c-title-5" style="margin: 0 auto">
        <div class="box" style="background-color: #1d2125">
            <div class="tip3 c-title-3 ml-6 pt-3 c-bold">
                <!-- 登陆记录 -->
                {{ $t("message.Setting.e") }}
            </div>
            <JTable :table-data="rowsData" :table-config="rowConfig" :table-total="tableTotal" @getData="getData"
                :flag="flag"></JTable>
        </div>
        <EmailVerify v-show="show" :show="show" :email="user.info?.email" :close="onChangeEmail"></EmailVerify>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from "vue";
import { useAccount } from "@/stores/account";
import JInput from "@/components/j-input/index.vue";
import JTable from "@/components/j-table/index.vue";
import EmailVerify from "./components/Emailverify.vue";
import { useUser } from "@/stores/user";
import { useLogin } from "@/hooks/useLogin";
import { formatTimestamp } from "@/comm/format";
import i18n from "@/locals";

const account = useAccount();
const user = useUser();
const login = useLogin();
const flag = ref(false)

const isBingGoogle = computed(() => {
    return !!user.thirdUsers.find(i => i.typeStr.toLowerCase() == "google");
});

const isBingTwitter = computed(() => {
    return !!user.thirdUsers.find(i => i.typeStr.toLowerCase() == "twitter");
});

const show = ref(false);
const onChangeEmail = () => {
    // console.log("yzt", user.info.email);
    show.value = !show.value;
};

const bindFacebook = () => {
    account.changePopBindFacebook(true);
};

const bindTwitter = () => {
    login.loginTwitter();
};

const bindGoogle = () => {
    login.loginGoogle();
};

// const items = ref([
//     {
//         title: "主頁",
//         disabled: false,
//         href: "/home"
//     },
//     {
//         title: "設置",
//         disabled: true,
//         href: ""
//     }
// ]);

// const rowsData = computed(() => {
// let ary: any[] = [];

// if (user.device) {
//     ary.push([formatTimestamp(user.device.loginTime), user.device.deviceType, user.device.deviceName, user.device.loginIp]);
// }
// return ary;
// });

const rowConfig = ref({
    columns: [i18n.global.t("message.Setting.table.a"), i18n.global.t("message.Setting.table.b"), i18n.global.t("message.Setting.table.c"), i18n.global.t("message.Setting.table.d")],
    flex: [1, 1, 1, 1],
    headerColor: "lightblue",
    rowColors: ["lightgreen", "lightyellow"]
});
const rowsData = ref<any[]>([]);
const tableTotal = ref(0)

// 获取数据
async function getData(page = 1, speed = 10) {
    flag.value = true
    setTimeout(async () => {
        const data = await user.getLogs<Logs>(page, speed);
        tableTotal.value = data.total
        rowsData.value = data.records.map(item => [item.loginTime ? formatTimestamp(item.loginTime) : '', item.loginType, item.deviceName, item.loginIp]);
        flag.value = false
    }, 800)


}
onMounted(async () => {
    getData()
});

interface Logs {
    records: Record[];
    total: number;
    size: number;
    current: number;
    orders: any[];
    optimizeCountSql: boolean;
    searchCount: boolean;
    pages: number;
}

interface Record {
    id: number;
    deviceId: string;
    deviceName: string;
    deviceType: number;
    loginType: string;
    loginTime: number;
    loginIp: string;
}
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
